<link rel="stylesheet" href="${ctxPath}/css/pages/aticle_add.css">
<!--select下拉框选项-->
<script type="text/javascript" src="${ctxPath}/js/select2.min.js"></script>
<script type="text/javascript" src="${ctxPath}/js/select2_locale_zh-CN.js"></script>
<!--引入umeditor-->
<script type="text/javascript" src="${ctxPath}/js/umeditor/umeditor.config.js"></script>
<script type="text/javascript" src="${ctxPath}/js/umeditor/umeditor.min.js"></script>
<script type="text/javascript" src="${ctxPath}/js/umeditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${ctxPath}/js/pages/aticle_add.js"></script>
<div class="pageheader">
    <h2><i class="fa fa-calendar"></i> 我的文章 <span>新增文章</span></h2>

    <div class="breadcrumb-wrapper">
        <span class="label">当前位置:</span>
        <ol class="breadcrumb">
            <li><a href="index.html">HomeCenter</a></li>
            <li><a href="calendar.html">我的文章</a></li>
            <li class="active">新增文章</li>
        </ol>
    </div>
</div>
<div class="contentpanel">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-btns">
                <a href="" class="panel-close">&times;</a>
                <a href="" class="minimize">&minus;</a>
            </div>
            <h4 class="panel-title">发布文章</h4>

            <p>我们终此一生，就是要摆脱他人的期待，找到真正的自己。----<a href="../blog/blog_index.html" target="_blank">查看博客首页</a></p>
        </div>
        <div class="panel-body panel-body-nopadding">

            <!-- BASIC WIZARD -->
            <div id="basicWizard" class="basic-wizard">

                <ul class="nav nav-pills nav-justified">
                    <li><a href="#tab1" data-toggle="tab"><i class="glyphicon glyphicon-edit"></i>&nbsp;发布文章</a>
                    </li>
                    <li><a href="#tab2" data-toggle="tab"><i class="fa fa-eye"></i>&nbsp;预览文章</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="tab1">
                        <form class="form" id="colin-add-aticle-form" action="./aticle_add.action" method="post"
                              enctype="multipart/form-data">
                            <div class="form-group">
                                <label class="col-sm-1 col-sm-offset-1">文章标题</label>

                                <div class="col-sm-9">
                                    <input class="form-control" type="text" name="aticleTitle" id="aticleTitle">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-1 col-sm-offset-1">文章摘要</label>

                                <div class="col-sm-9">
                                            <textarea class="form-control" id="aticleDigest" name="aticleDigest"
                                                      rows="6"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 col-sm-offset-1">文章分类</label>

                                <div class="col-sm-9">
                                    <select class="form-control" id="aticleCategory" name="aticleCategory"
                                            multiple data-placeholder="选择文章分类">
                                        <option value="0">--请选择--</option>
                                        <option value="java">java开发技术</option>
                                        <option value="Web">Web前端</option>
                                        <option value="blog">技术博文</option>
                                        <option value="Python">Python</option>
                                        <option value="Android">Android</option>
                                        <option value="C&C++">C/C++</option>
                                        <option value="invoke">嵌入式</option>
                                        <option value="life">生活奇趣</option>
                                        <option value="funny">搞笑一刻</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 col-sm-offset-1">文章标签</label>

                                <div class="col-sm-9">
                                    <input class="form-control" type="text" name="aticleTips" id="aticleTips"
                                           placeholder="多个标签用,隔开">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 col-sm-offset-1">文章内容</label>

                                <div class="col-sm-9">
                                    <!-- 加载编辑器的容器 -->
                                    <script id="aticleContentContainer" name="aticleContent" type="text/plain"
                                            style="height:260px;"></script>
                                </div>
                            </div>
                            <!--<div class="form-group">
                                <label class="col-sm-1 col-sm-offset-1">文章封面</label>
                                <div class="col-sm-9">
                                    <div id="uploader" class="form-control">
                                        &lt;!&ndash;用来存放文件信息&ndash;&gt;
                                        <div id="thelist" class="uploader-list"></div>
                                        <div>
                                            <div id="slider-success" class="slider-success mb20"></div>
                                            <div id="picker" class="btn">选择文件</div>
                                            <div id="uploader" class="btn btn-danger">开始上传</div>
                                        </div>
                                    </div>
                                </div>
                            </div>-->

                            <div class="form-group">
                                <div class="col-sm-6 col-sm-offset-3">
                                    <button id="colin-aticle-add-submitbtn" type="submit"
                                            class="btn btn-success col-sm-4 col-sm-offset-2"><i
                                            class="glyphicon glyphicon-pencil"></i>&nbsp;&nbsp;发表文章
                                    </button>
                                    <button type="reset" class="btn btn-danger col-md-4 col-sm-offset-1"><i
                                            class="glyphicon glyphicon-minus"></i>&nbsp;&nbsp;取消
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="tab2">
                        <div class="col-sm-12">

                            <div class="panel panel-default panel-blog">
                                <div class="panel-body">
                                    <h3 class="blogsingle-title" id="colin-aticle-preview-title"></h3>

                                    <ul class="blog-meta">
                                        <li id="colin-aticle-preview-date"></li>
                                        <li id="colin-aticle-preview-tags"></li>
                                    </ul>

                                    <hr/>
                                    <blockquote>
                                        <p id="colin-aticle-preview-digest"></p>
                                    </blockquote>
                                    <hr/>
                                    <div class="mb20" id="colin-aticle-preview-content">

                                    </div>

                                </div>
                                <!-- panel-body -->
                            </div>
                            <!-- panel -->
                        </div>
                    </div>
                </div>
                <!-- tab-content -->
                <ul class="pager wizard">
                    <li class="previous"><a href="javascript:void(0)">返回</a></li>
                    <li class="next" id="colin-aticle-preview-btn"><a href="javascript:void(0)">查看预览</a></li>
                </ul>
            </div>
            <!-- #basicWizard -->
        </div>
        <!-- panel-body -->
    </div>
    <!-- panel -->
</div>